<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="width=device-width">
	
	
	<title>Star Ratings With Very Little CSS | CSS-Tricks</title>

	<link rel="shortcut icon" href="http://cdn.css-tricks.com/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search">
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/CssTricks">

	<base href="http://css-tricks.com">
	
	
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.1.2 - http://yoast.com/wordpress/seo/ -->
<meta name="description" content="Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with ver"/>
<link rel="canonical" href="http://css-tricks.com/star-ratings/" />
<!-- / Yoast WordPress SEO plugin. -->

<link rel="alternate" type="application/rss+xml" title="CSS-Tricks &raquo; Star Ratings With Very Little CSS Comments Feed" href="http://css-tricks.com/star-ratings/feed/" />
<link rel='stylesheet' id='wp-polls-css'  href='http://cdn.css-tricks.com/wp-content/plugins/wp-polls/polls-css.css?ver=2.50' type='text/css' media='all' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.2'></script>
<link rel='shortlink' href='http://wp.me/p28635-4d6' />
<style type="text/css">
.wp-polls .pollbar {
	margin: 1px;
	font-size: 13px;
	line-height: 15px;
	height: 15px;
	background-image: url('http://cdn.css-tricks.com/wp-content/plugins/wp-polls/images/default/pollbg.gif');
	border: 1px solid #ffffff;
}
</style>
		
	<!--[if !IE]><!-->
	<script src="//use.typekit.com/rnr2kxn.js"></script>
	<script>try{Typekit.load();}catch(e){}</script>
	<script src="/prettify/prettify.js"></script>
	<link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/style.css?v=9.5">
	<!--<![endif]-->
	
	<!--[if gte IE 8]>
	<script src="http://use.typekit.com/rnr2kxn.js"></script>
	<script>try{Typekit.load();}catch(e){}</script>
	<script src="/prettify/prettify.js"></script>
	<link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/style.css?v=9.5">
	<![endif]-->
	
	<!--[if lte IE 7]>
	<link rel="stylesheet" href="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/css/ie6.0.3.css">
	<![endif]-->

			<script src='http://cdn.css-tricks.com/wp-includes/js/comment-reply.js'></script>
		
		
		
		
		
		
		
		
		
		
		
	<script src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/js/fitspondernizer.js"></script>
<!-- Art Direction Styles -->



</head>

<body class="single single-post postid-16188 single-format-standard loading">

	<script>
	(function(){
	  var bsa = document.createElement('script');
	     bsa.type = 'text/javascript';
	     bsa.async = true;
	     bsa.src = '//s3.buysellads.com/ac/bsa.js';
	  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
	})();
	</script>

	<div id="page-wrap">
	
		<header>
		
			<div class="inside">
			
				<a href="/" id="logo">
					<h1 class="screen-reader-text">CSS-Tricks</h1>
					<div id="tag">A Web Design Community</div>
					<div id="slogan">
						<span>Making</span>
						<hr />
						<span>Websites</span>
						<hr />
						<span>Better</span>
						<hr />
						<em>Since 2007</em>
					</div>
				</a>
			
				<nav class="main-nav-wrap">
					<ul class="main-nav group">
						<li class="articles"><a href="/">Articles <span>The blog</span></a></li>
						<li class="forums"><a href="/forums/">Forums <span>Get &amp; give help</span></a></li>
						<li class="snippets"><a href="/snippets/">Snippets <span>Clip and save</span></a></li>
						<li class="videos"><a href="/video-screencasts/">Videos <span>Watch and learn</span></a></li>
						<li class="almanac"><a href="/almanac/">Almanac <span>Reference guide</span></a></li>
						<li class="gallery"><a href="/gallery/">Gallery <span>Ooooh Aaaah</span></a></li>
						<li class="downloads"><a href="/downloads/">Downloads <span>Just a seed</span></a></li>
						<li class="deals"><a href="/deals/">Deals <span>Save bucks</span></a></li>
					</ul>
				</nav>
				
				<div class="top-ad-treehouse" id="top-ad-treehouse">
				  <a href="http://ads.teamtreehouse.com/css-tricks/" class="the-frog" id="the-frog">
						<div class="treehouse-frog">
							<div class="left-eye">
								<span></span>
							</div>
							<div class="right-eye">
								<span></span>
							</div>
							<div class="nostril-left"></div>
							<div class="nostril-right"></div>
							<div class="mouth-wrap">
								<div class="mouth-top"></div>
								<div class="mouth-bottom"></div>
							</div>
						</div>
				  </a>
				  <a class="ad-treehouse-text" href="http://teamtreehouse.com/library/design-foundations/css3/selectors/attribute-selectors/play/?cid=924">
						<div class="ad-treehouse-title">What do you want to <br>learn today?</div>
						<div class="ad-treehouse-desc"><strong>Treehouse</strong> is the best place to learn web design,<br> web development, and iOS.</div>
					</a>
				</div>
			
			</div><!-- end inside -->
		
		</header>

		<section id="main-content">
		
			<div class="inside group">
<div id="juice" class="group">

	<div class="inside" class="group">

	    
		<article class="post hentry" id="post-16188">

			<h1>Star Ratings With Very Little CSS</h1>
			
			<p class="author-byline">by: Chris Coyier</p>
			
			<div class="date-bubble">
				<span>Feb</span>
				<span>1</span>
				<span>2012</span>
			</div>
		  
		  			<div class="comment-bubble">
				<a href="http://css-tricks.com/star-ratings/#comments" class="comments-link"  rel="nofollow" title="Comment on Star Ratings With Very Little CSS">49</a>			</div>
			
			<div class="entry-content">
				<p>Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.<span id="more-16188"></span></p>
<p><img src="http://cdn.css-tricks.com/wp-content/uploads/2012/02/starratings.png" alt="" title="starratings" width="240" height="153" class="alignnone size-full wp-image-16198" /></p>
<p>The markup uses the unicode entity for a star (☆) right in it. If you have a UTF-8 charset that should be no big deal. Alternatively you could use &amp;#9734; (<a href="http://www.evotech.net/blog/2007/08/css-javascript-character-entities/">Calculator</a> for that kind of thing). You could use as many stars as you like:</p>
<pre rel="HTML"><code>&lt;div class="rating"&gt;
&lt;span&gt;☆&lt;/span&gt;&lt;span&gt;☆&lt;/span&gt;&lt;span&gt;☆&lt;/span&gt;&lt;span&gt;☆&lt;/span&gt;&lt;span&gt;☆&lt;/span&gt;
&lt;/div&gt;</code></pre>
<p>Now we need to flop out that "hollow" star with a "solid" star on hover (<a href="http://copypastecharacter.com/">Gallery</a> for finding those sorts of characters). Easy, just drop a pseudo element of a solid star (★) over it on <code>:hover</code></p>
<pre rel="CSS"><code>.rating &gt; span:hover:before {
   content: "\2605";
   position: absolute;
}</code></pre>
<p>Just by virtue of being it being absolutely positioned, the <code>top: 0; left: 0;</code> are implied (in modern browsers, anyway). So the solid star just sits directly on top of the hollow star. You could even change the color or size if you wished.</p>
<p>But what we have so far only works on individual stars. The UX pattern demands that all the stars be filled in. Fo instance, if we hover over the 4th star, the 4th star becomes solid, but also the 1st, 2nd, and 3rd. </p>
<p>Through CSS, there is no way to select a <em>preceding</em> child element. However, there is a way to select <em>succeeding</em> child elements, through the <a href="http://css-tricks.com/child-and-sibling-selectors/">adjacent or general sibling combinators</a>. If we literally <a href="http://css-tricks.com/snippets/css/reversing-text/">reverse the order of the characters</a>, then we can make use of the general sibling combinator to select all the stars that appear <em>before</em> the hovered star visually, but <em>after</em> the hovered star in the HTML. </p>
<pre rel="CSS"><code>.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating &gt; span:hover:before,
.rating &gt; span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}</code></pre>
<p>That's it! The whole star ratings UX pattern with very little code. Here's the entire bit of CSS to make it work:</p>
<pre rel="CSS"><code>.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating &gt; span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating &gt; span:hover:before,
.rating &gt; span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}</code></pre>
<p><a href="http://css-tricks.com/examples/StarRating/" class="button">View Demo</a></p>
<p>And <a href="http://dabblet.com/gist/1709019">here's a Dabblet</a> if you wanna mess with it.</p>
<h3>Actual Usage</h3>
<p>Chances are, JavaScript is going to be involved with rating stars anyway. When a user clicks a star, the rating is reported back via Ajax, and the widget itself gains a class to permanently display their selected number of stars. With JavaScript already involved, wouldn't it be OK to lean on it for flip-flopping classes around on the stars to make them work? If your app is absolutely dependent on JavaScript to work, then sure, that's fine. If you are interested in building a website that still works without JavaScript, then these Star Ratings are going to need more work. You should look into <a href="http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/">Lea Verou's example</a> which uses radio buttons, which could be a part of a form that can be submitted to "rate" whatever it is without JavaScript.</p>
<h3>Others</h3>
<p>After first sharing this on Twitter, a couple of other folks took a crack at it in slightly different ways. <a href="https://twitter.com/dmfilipenko/status/164800384953614336">@dmfilipenko</a>'s <a href="http://dabblet.com/gist/1718992">Dabblet</a>. <a href="https://twitter.com/mprogano/status/164418496313303040">@mprogano's</a> <a href="http://dabblet.com/gist/1712123">Dabblet</a></p>
			</div>

				
			
			
			<div class="end-of-article-stuff entry-unrelated">
			
				<div class="eoa-row group">
			
					<div class="sharing sharing-twitter">
						<div>
		      		<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
		      	</div>
		      </div>
		      
		      <div class="sharing sharing-google-plus">
		      	<div>
			      	<div class="g-plusone" data-size="medium" data-count="true"></div>
			      </div>
		      </div>
		      
		      <div class="sharing sharing-facebook">
		      	<div>
			      	<div id="fb-root"></div>
			      	<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>
	      		</div>
	      	</div>
	      	
	      </div>
		      
		      <script>
		      (function(doc, script) {
				    var js, 
				        fjs = doc.getElementsByTagName(script)[0],
				        frag = doc.createDocumentFragment(),
				        add = function(url, id) {
				            if (doc.getElementById(id)) {return;}
				            js = doc.createElement(script);
				            js.src = url;
				            id && (js.id = id);
				            frag.appendChild( js );
				        };
				        
					    // Google+ button
					    add('https://apis.google.com/js/plusone.js');
					    // Facebook SDK
					    add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
					    // Twitter SDK
					    add('//platform.twitter.com/widgets.js');
					
					    fjs.parentNode.insertBefore(frag, fjs);
					}(document, 'script'));
				</script>
	      
	      <div class="eoa-row">
	      	<div class="sharing previous-article">
	      		<div>
							<strong>Previous Blog Post: </strong>
							&laquo; <a href="http://css-tricks.com/real-world-css/" rel="prev">Real-World CSS</a>						</div>
					</div>
	      </div>
	      
	    </div>

		</article>
		
		<div id="bsap_1250418" class="bsarocks entry-unrelated bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>
		
					<section id="comments">


	
	<h4>
		<a href='http://css-tricks.com/star-ratings/feed/'><span class='comments-rss-link'>Subscribe to</span></a>		The Thread
	</h4>
	
	<div id="comment-stats">
		<div id="happy-comments"></div>
		<div id="sad-comments"></div>
	</div>

	<ol class="commentlist group">
	
		
		<li class="comment even thread-even depth-1 group" id="li-comment-147031">
			
			<div id="comment-147031" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/9b40f7b7baddb76b367a06fd793e1778?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://grawl.ru' rel='external nofollow' class='url'>Grawl</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147031"><time pubdate datetime="2012-02-01T21:33:14+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>partially broken in Safari 5.1.2: <a href="http://cl.ly/DqpH" rel="nofollow">http://cl.ly/DqpH</a></p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 group" id="li-comment-147032">
			
			<div id="comment-147032" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/d04e261168fc4c6f3bf1cabf203efd5a?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">fromanywhere</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147032"><time pubdate datetime="2012-02-01T21:40:51+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Hmm&#8230;<br />
<a href="https://img.skitch.com/20120202-tdahxwtcyf1fdag65uwh2iybmd.jpg" rel="nofollow">https://img.skitch.com/20120202-tdahxwtcyf1fdag65uwh2iybmd.jpg</a></p>
<p>Also, i think, it&#8217;s better to use , semantically, no?</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment even depth-2 group" id="li-comment-147034">
			
			<div id="comment-147034" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/d04e261168fc4c6f3bf1cabf203efd5a?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">fromanywhere</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147034"><time pubdate datetime="2012-02-01T21:45:03+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>&lt;ul&gt;, sorry</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2 group" id="li-comment-147038">
			
			<div id="comment-147038" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://chriscoyier.net' rel='external nofollow' class='url'>Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147038"><time pubdate datetime="2012-02-01T21:54:59+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>For that particular issue, turns out it&#8217;s best to at least use <code>left: 0;</code> for the absolutely positioned filled star.  </p>
<p>And I&#8217;d say no on the unordered list. If anything, an ordered one, but I&#8217;d say it&#8217;s just some stars you can click, it&#8217;s not a &#8220;list&#8221;.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment even thread-even depth-1 group" id="li-comment-147041">
			
			<div id="comment-147041" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/1d4925cfe7b4025037be5038af7d4292?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://mrwweb.com' rel='external nofollow' class='url'>Mark</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147041"><time pubdate datetime="2012-02-01T22:04:55+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I love this idea!</p>
<p>If it were me, I&#8217;d tack on &#8220;cursor:pointer&#8221; to the :hover state.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment odd alt depth-2 group" id="li-comment-147614">
			
			<div id="comment-147614" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/49c8a681abab5b69f3d63f84293fa6f1?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.step4wd.com' rel='external nofollow' class='url'>M. Ahmad Zafar</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147614"><time pubdate datetime="2012-02-03T22:59:36+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Yes that would be great!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147043">
			
			<div id="comment-147043" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/cc9464baa9fdc511b1d5cbfb33310801?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.chossonandkallah.com' rel='external nofollow' class='url'>Shimon</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147043"><time pubdate datetime="2012-02-01T22:11:17+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>It&#8217;s actually off a few pixels in the Chrome (Mac) too.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147053">
			
			<div id="comment-147053" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/fd790474b3f2ce8e55568adc201b848a?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.logoblog.org' rel='external nofollow' class='url'>Nora Reed</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147053"><time pubdate datetime="2012-02-01T23:06:46+00:00">02/01/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Nice article. This is very Great to share this useful post. thanks for the share.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147059">
			
			<div id="comment-147059" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/2c1988da9816d1cf672d5eff4ef5cdfc?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Luke</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147059"><time pubdate datetime="2012-02-02T00:06:50+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I think it won&#8217;t work with mobile safari on touch like it does on mine</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147070">
			
			<div id="comment-147070" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/b8a1bec697bf352ce146a9c7b127fdc2?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Heiko</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147070"><time pubdate datetime="2012-02-02T00:57:49+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>It&#8217;s an awesome technique, but I also get that pixel-offset in Firefox 10 on OS X.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment even depth-2 group" id="li-comment-147615">
			
			<div id="comment-147615" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/49c8a681abab5b69f3d63f84293fa6f1?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.step4wd.com' rel='external nofollow' class='url'>M. Ahmad Zafar</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147615"><time pubdate datetime="2012-02-03T23:01:29+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Same here. I&#8217;m using Firefox 10 on Ubuntu (Linux)</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 group featured" id="li-comment-147083">
			
			<div id="comment-147083" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/94c7601a9b6f238265b84651afe0e44b?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Ron</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147083"><time pubdate datetime="2012-02-02T01:23:47+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>FYI: <code>top: 0; left: 0;</code> are <em>never</em> implied. If an element is positioned absolutely, but a horizontal or vertical position is not specified, the element will take the horizontal or vertical position it would have had if the element would have been statically positioned (i.e. in flow).<br />
This is the case for <em>all</em> current browsers. (It works for old IE versions as well, but not completely: old IE has issues with absolutely positioned inline elements.)</p>
<p>See also: <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" rel="nofollow">CSS 2.1: Visual formatting model details &ndash; 10.6.4 : Absolutely positioned, non-replaced elements</a></p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-even depth-1 group" id="li-comment-147087">
			
			<div id="comment-147087" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/dece03403bea0bf0f7a40f94c2c1ab15?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Paul Nicholls</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147087"><time pubdate datetime="2012-02-02T01:40:04+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Extended to use transparent radio buttons to capture and preserve state without needing any JS:<br />
<a href="http://dabblet.com/gist/1709019" rel="nofollow">http://dabblet.com/gist/1709019</a><br />
I&#8217;ve only tested this in Chrome, but consider it a proof-of-concept.  Will probably require some JS to support old browsers, but it&#8217;s a start.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment odd alt depth-2 group" id="li-comment-147093">
			
			<div id="comment-147093" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/dece03403bea0bf0f7a40f94c2c1ab15?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Paul Nicholls</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147093"><time pubdate datetime="2012-02-02T02:23:07+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I just tested it in Firefox 9, and it works perfectly there too.  Anyone tested it elsewhere?</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor even depth-2 group" id="li-comment-147269">
			
			<div id="comment-147269" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://chriscoyier.net' rel='external nofollow' class='url'>Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147269"><time pubdate datetime="2012-02-02T12:51:27+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>You gotta save it as a new Dabblet</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt depth-2 group" id="li-comment-147435">
			
			<div id="comment-147435" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/dece03403bea0bf0f7a40f94c2c1ab15?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Paul Nicholls</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147435"><time pubdate datetime="2012-02-03T04:46:56+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Ah &#8211; I managed to copy the wrong URL.  I did save it as a new dabblet:<br />
<a href="http://dabblet.com/gist/1722368" rel="nofollow">http://dabblet.com/gist/1722368</a></p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147095">
			
			<div id="comment-147095" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/e783f39b925c88ccd8b008daa6b35040?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Stefan Cova</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147095"><time pubdate datetime="2012-02-02T02:30:32+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Nice Tip !  but do you know why the stars are so ugly in Chrome on Windows</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147099">
			
			<div id="comment-147099" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/5cce99e9bf6154703d8ecdf474a750bd?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://twitter.com/jitendravyas' rel='external nofollow' class='url'>Jitendra Vyas</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147099"><time pubdate datetime="2012-02-02T02:50:01+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>How to make half star active? if i want to give 3.5 star</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147108">
			
			<div id="comment-147108" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/da555249fb5c016dde1ea8843bde1486?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://energio.wordpress.com/' rel='external nofollow' class='url'>Gio</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147108"><time pubdate datetime="2012-02-02T03:11:50+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>a gift ;)</p>
<p>Unicode symbol map bookmarklet similar to &#8220;copypaste&#8221;</p>
<p><a href="http://panmental.de/symbols/info.htm" rel="nofollow">http://panmental.de/symbols/info.htm</a></p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147151">
			
			<div id="comment-147151" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/9481d4984e85f636fd5911554c4ef885?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">BrianMB</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147151"><time pubdate datetime="2012-02-02T05:39:24+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Someone mentioned semantics earlier, and this only becomes semantic IMO if  is involved.</p>
<p>Otherwise, this is awesome if you don&#8217;t require a star treatment outside of what an available typeface provides!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment even depth-2 group" id="li-comment-147156">
			
			<div id="comment-147156" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/9481d4984e85f636fd5911554c4ef885?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">BrianMB</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147156"><time pubdate datetime="2012-02-02T05:54:02+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>ugh.. if &lt;select&gt; is involved</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 group" id="li-comment-147177">
			
			<div id="comment-147177" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/9ebd51ee1a6bcc7d6a6151bd36b421fb?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Alfred Larsson</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147177"><time pubdate datetime="2012-02-02T07:00:05+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>looks like five squares for me. chrome 15</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-even depth-1 group featured" id="li-comment-147193">
			
			<div id="comment-147193" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/282fc778071b045294d806b18e216fa1?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">cnwtx</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147193"><time pubdate datetime="2012-02-02T08:07:43+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>This would be the perfect use case of the not-yet-available <code>:nth-letter(n)</code> instead of all those spans.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 group" id="li-comment-147194">
			
			<div id="comment-147194" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/42ae77a00c615269062038db20301ce2?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Chad</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147194"><time pubdate datetime="2012-02-02T08:10:11+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>If you&#8217;re seeing squares it means the system font being rendered in your browser does not support the glyphs at those code points mentioned in the article.</p>
<p>I&#8217;m relatively new to the web development scene and I&#8217;m having a hard time understanding why avoiding JS with CSS is important. Are users running browsers with JS disabled? That seems very unlikely to me but again, I&#8217;m inexperienced in this space.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-even depth-1 group" id="li-comment-147207">
			
			<div id="comment-147207" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/ecdaa0f8474b0f2e67419823e8327cda?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.fraktalny.net' rel='external nofollow' class='url'>Fraktal</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147207"><time pubdate datetime="2012-02-02T08:55:37+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I will use it on my site. Thanks!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-odd thread-alt depth-1 group" id="li-comment-147228">
			
			<div id="comment-147228" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/2a0466a65830979f3a9f8f77d9a36b93?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.inserthtml.com/' rel='external nofollow' class='url'>Johnny</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147228"><time pubdate datetime="2012-02-02T10:15:26+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>This would be very easy with SVG.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor even depth-2 group" id="li-comment-147270">
			
			<div id="comment-147270" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://chriscoyier.net' rel='external nofollow' class='url'>Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147270"><time pubdate datetime="2012-02-02T12:52:02+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>How&#8217;s that?</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment odd alt thread-even depth-1 group featured" id="li-comment-147260">
			
			<div id="comment-147260" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/061dbecb6643f2f75580d4ea57853674?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://josephsilber.com' rel='external nofollow' class='url'>Joseph Silber</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147260"><time pubdate datetime="2012-02-02T12:28:59+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>There&#8217;s no need to reverse direction to rtl.</p>
<p>See <a href="http://dabblet.com/gist/1725251" rel="nofollow">this Dabblet</a>.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment even depth-2 group" id="li-comment-147725">
			
			<div id="comment-147725" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/1867e6abcd1e03d252c3cb609230b709?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://aaronstone.tk' rel='external nofollow' class='url'>Aaron Stone</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147725"><time pubdate datetime="2012-02-04T08:34:06+00:00">02/04/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Please could you explain how you&#8217;ve managed to replicate Chris&#8217; example without reversing the direction to &#8216;Right-To-Left&#8217;? I&#8217;ve read the Dabblet but I don&#8217;t quite understand what you did there, mate.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt depth-2 group" id="li-comment-149872">
			
			<div id="comment-149872" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/c34a1644cd28f2e410a04e5ca675ece9?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.dev-hq.net/' rel='external nofollow' class='url'>Joe</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149872"><time pubdate datetime="2012-02-13T08:15:26+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Nice solution without rtl!<br />
The only issue is that because .rating is a block element, hovering over a part of the div which is not a star (e.g. Putting your mouse vertically in line with the stars, but on the far left of the page) results in all the stars going gold.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147288">
			
			<div id="comment-147288" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/09b1092d43417274ceda7181ded61243?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://blogverize.blogspot.com' rel='external nofollow' class='url'>Nimsrules</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147288"><time pubdate datetime="2012-02-02T13:28:20+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Great article. These are good for experiment but I&#8217;ll stick with the jQuery ones.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147356">
			
			<div id="comment-147356" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/d38c9047821cfa8dc9eb0e8447c3fe82?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">DanaB</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147356"><time pubdate datetime="2012-02-02T20:32:40+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>If the goal is merely minimal css, you could get rid of the .rating selector and it&#8217;s  and add float: right to each span. Another way of flipping around the order. A by product being you would lose the centering&#8230;.</p>
<p>Neat technique!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147375">
			
			<div id="comment-147375" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/9b74c26c462552765854fea39cb3b0e7?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://reedeesign.com' rel='external nofollow' class='url'>Rick Lamers</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147375"><time pubdate datetime="2012-02-02T23:47:39+00:00">02/02/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Props Chris, you&#8217;re so wicked creative with CSS. I would&#8217;ve never come up with this solution. </p>
<p>Though, as mentioned in the comments. Aren&#8217;t there browser compatibility issues when you&#8217;re using the Unicode symbol for a star instead of using an image?</p>
<p>- Rick</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147395">
			
			<div id="comment-147395" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/b8af96da36dafc3b605b902a509d35f7?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Aaron</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147395"><time pubdate datetime="2012-02-03T01:44:08+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>It&#8217;s a little annoying that the cursor flickers between text and pointer (I&#8217;m using chrome) while hovering over the stars. Maybe wrap each one with a div and set the cursor to something consistent?</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147532">
			
			<div id="comment-147532" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/69f419c8bee0eb62f0c004fdcfc2c9df?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.jenst.se' rel='external nofollow' class='url'>Jens Törnell</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147532"><time pubdate datetime="2012-02-03T11:40:16+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>It does not work in Windows XP. It however works on Windows Vista and Windows 7 because they have bigger / more updated charsets.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-147573">
			
			<div id="comment-147573" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/84d5cc5721a1ce3a23a196f35fba7267?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.onsecrethunt.com' rel='external nofollow' class='url'>Varinder Pal Singh</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147573"><time pubdate datetime="2012-02-03T18:12:55+00:00">02/03/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Thanks for the fantastic posts very informative and very usefull for us. Thanks for sharing keep posting.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-147635">
			
			<div id="comment-147635" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/ce1c0bc4e985abe0fa75b1a0670e4981?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">Sascha Metz</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-147635"><time pubdate datetime="2012-02-04T00:59:52+00:00">02/04/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Very good..</p>
<p>Thank you</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-148419">
			
			<div id="comment-148419" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/d984a9ce6c0235a32005d3a6ecb6ef41?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://wpline.net' rel='external nofollow' class='url'>WP:ine</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-148419"><time pubdate datetime="2012-02-08T00:36:21+00:00">02/08/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Hi,</p>
<p>I don&#8217;t see stars. :)</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-149016">
			
			<div id="comment-149016" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/3edea3f4b7d82287a7a4f3ec1f6bbb3b?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.exauro.com' rel='external nofollow' class='url'>César Castro</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149016"><time pubdate datetime="2012-02-10T07:40:53+00:00">02/10/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Nice! This is really lightweight!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-149212">
			
			<div id="comment-149212" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/810a1d838d30af71c5137cb4eae3b97b?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://squidoo.com/paginas-web-madrid' rel='external nofollow' class='url'>Carol</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149212"><time pubdate datetime="2012-02-11T01:45:31+00:00">02/11/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I like it, I try tu use it.<br />
thanks</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-149740">
			
			<div id="comment-149740" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/c8f40f94048bfd5866f2e1e74f233bd9?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://pressedweb.com' rel='external nofollow' class='url'>Cory</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149740"><time pubdate datetime="2012-02-13T00:14:22+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Here&#8217;s my implementation: <a href="http://pressedweb.com/sandbox/star_ratings" rel="nofollow">http://pressedweb.com/sandbox/star_ratings</a></p>
<p>All CSS. Saves states. Falls back all the way to IE6. Easily add on as many or few stars as you need.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		<ul class='children'>

		<li class="comment byuser comment-author-chriscoyier-2 bypostauthor odd alt depth-2 group" id="li-comment-149928">
			
			<div id="comment-149928" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://chriscoyier.net' rel='external nofollow' class='url'>Chris Coyier</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149928"><time pubdate datetime="2012-02-13T11:59:59+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>That&#8217;s a neat use of :target. One thing to note, that always seems to bite me in the ass when I want to do something cool functionality-wise with :target, is that you can&#8217;t prevent the page-jumpdown when the URL hash changes with just CSS (at least as far as I know). So if there is enough page content so that the page scrolls, when clicking the page will jump so that the star is butted up against the top edge.</p>
<p>When trying to implement click/toggle functionality through CSS, I&#8217;m a bigger fan of the <a href="http://css-tricks.com/the-checkbox-hack/" rel="nofollow">checkbox/radio button hack</a>. Lea Verou&#8217;s use it: <a href="http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/" rel="nofollow">http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/</a></p>
<p>And I wouldn&#8217;t call hers a hack either, since selecting a choice of stars is basically what radio buttons do.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even depth-2 group" id="li-comment-149945">
			
			<div id="comment-149945" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/c8f40f94048bfd5866f2e1e74f233bd9?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://pressedweb.com' rel='external nofollow' class='url'>Cory</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149945"><time pubdate datetime="2012-02-13T13:05:55+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Ah curses. You&#8217;re absolutely right. Thanks for reminding me. I don&#8217;t realize it&#8217;s jumping to that page anchor when I&#8217;m testing it without it being surrounded by content.</p>
<p>Her solution is good moving forward (especially once IE9/10 are forced on people), but the fallback in 8 and below are ugly radio buttons and a text label.</p>
<p>Seems like her solution + using an image in the label + masking the radio button with the label + linking the label to the radio button = solution. I&#8217;m 99% sure that&#8217;d be the best solution and with some positioning TLC for IE6+ it&#8217;d become a standard.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
</ul>
</li>

		<li class="comment odd alt thread-even depth-1 group buried" id="li-comment-149776">
			
			<div id="comment-149776" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/fd310dc48f0f8592e2ab26bb4b35ba6f?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.djskinny.co.za' rel='external nofollow' class='url'>Louis</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149776"><time pubdate datetime="2012-02-13T02:39:47+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Very cool technique that we can use on our website. Thanks!</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-149871">
			
			<div id="comment-149871" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://0.gravatar.com/avatar/c34a1644cd28f2e410a04e5ca675ece9?s=68&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.dev-hq.net/' rel='external nofollow' class='url'>Joe</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149871"><time pubdate datetime="2012-02-13T08:11:17+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>I would have never thought of something like this &#8211; awesome solution for it!<br />
Made my own little mods over at <a href="http://dabblet.com/gist/1817473" rel="nofollow">http://dabblet.com/gist/1817473</a> which mainly consists of some design changes (initially dots instead of stars) and also the removal of &#8220;unicode-bidi&#8221; since I don&#8217;t have a clue what it does.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-149976">
			
			<div id="comment-149976" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/300a5afe08c9376f7620c1a6b048a7a9?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.andremoves.com' rel='external nofollow' class='url'>man van</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-149976"><time pubdate datetime="2012-02-13T15:56:03+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>this tricks are very good i use them in my site thanks for sharing them  with us</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-150076">
			
			<div id="comment-150076" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/ddb861368f2e63998508d788ec320ae5?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://www.customicondesign.com/' rel='external nofollow' class='url'>custom icon design</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-150076"><time pubdate datetime="2012-02-13T23:58:32+00:00">02/13/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>it doesnt support for ie6, right? because in my pc, I tested in ie6, but failed. which version of ie browser will can be use?</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment odd alt thread-even depth-1 group" id="li-comment-150360">
			
			<div id="comment-150360" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/daefaf52021e8adac04d635558363aaa?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author"><a href='http://dilber.info' rel='external nofollow' class='url'>ivanhoe</a></div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-150360"><time pubdate datetime="2012-02-15T05:30:37+00:00">02/15/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Cool idea, but it&#8217;s accessibility is somewhat limited. Screen reader will not say: rating 4 stars, but: star star star star hollow star (if it even knows how to handle the difference between different star characters, which I doubt). Bots neither can make sense out of it. Also for human visitors,  can you be sure those stars still make sense, even if their layout gets broken, e.g. if CSS is off  or screen very small?</p>
<p>I prefer the old school patter of using  numbers for the rating, and then substituting them on the fly with a proper number of stars, and that&#8217;s easier to do with background images.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>

		<li class="comment even thread-odd thread-alt depth-1 group" id="li-comment-150361">
			
			<div id="comment-150361" class="comment-body group">
									
				<div class="comment-author-wrap vcard">
					<img alt='' src='http://1.gravatar.com/avatar/75b1b72743bb6f0e9585ca6032d631aa?s=68&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&amp;r=R' class='avatar avatar-68 photo' height='68' width='68' /><div class="comment-author">michael</div> <div class="comment-time"><a href="http://css-tricks.com/star-ratings/#comment-150361"><time pubdate datetime="2012-02-15T05:36:52+00:00">02/15/2012</time></a></div>									</div><!-- .comment-author .vcard -->

				
				<div class="comment-content">
					<p>Another alternative to radio buttons is just an anchor on each star which includes a query string for php to save the rating to the database. In fact I think anchors should be used instead of spans and Javascript can prevent default click event.</p>
					<div class="reply">
											</div><!-- .reply -->
				</div>

			</article><!-- #comment-## -->

		</li>
	
	</ol>

		


<div id="thread-closed">
		This comment thread is closed. If you have important information 
		to share, you can always <a style="white-space: nowrap;" href="/contact/">contact me</a>.
</div>


</section>			

		
	
	</div><!--inside-->

</div><!--juice-->

<aside class="entry-unrelated">

  <div class="inside">
    
    <form role="search" method="get" id="searchform" action="/search-results/">
      <div>
        <label class="screen-reader-text" for="s">Search for: </label>
        <input type="text" value="" name="q" id="s">
        <input type="submit" id="searchsubmit" value="Search">
      </div>
    </form>
		
		<div id="browse-archives">
			<em>Or...</em>
			<a href="/archives/">

			 <span>B</span><span>r</span><span>o</span><span>w</span><span>s</span><span>e</span>
			 <span>A</span><span>r</span><span>c</span><span>h</span><span>i</span><span>v</span><span>e</span><span>s</span>

			 </a>
		</div>

    <h4>Training</h4>
  	
  	<div class="sidebar-box group sidebar-ad-treehouse">
  	
  		<a href="http://ads.teamtreehouse.com/css-tricks/">

    		<p class="treehouse-ad-intro">CSS-Tricks is brought to you in part by <strong>Treehouse</strong>. If you want to improve your skills as a web worker, you should be on Treehouse. I can't recommend it enough. <img src="/images/treehouse-logo-mini.png" class="mini-treehouse-logo" alt=""></p>
    		
    		<img src="/images/treehouse-sidebar-ad3.png" class="large-treehouse-ad" alt="">
    		
    		<p>Just some of what you can learn: Accessibility, HTML5, CSS3, Design, JavaScript, jQuery, Responsive Web Design, UX, Version Control, WordPress, and iOS.</p>
  		
  		</a>
  		
  	</div>
  	
  	<div class="sidebar-box">
    	<h4>Subscribe!</h4>
      <ul id="subscribe-main">
        <li class="rss"><a href="http://feeds.feedburner.com/CssTricks"><span>RSS Feed</span></a></li>
        <li class="email"><a href="http://feedburner.google.com/fb/a/mailverify?uri=CssTricks&amp;loc=en_US"><span>Email Subscription</span></a></li>
        <li class="itunes"><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=273881728"><span>iTunes Large</span></a></li>
        
        <li class="itunes"><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewPodcast?id=299818542"><span>iTunes Mobile</span></a></li>
        <li class="rss"><a href="http://feeds.feedburner.com/CSS-TricksSnippets"><span>Snippets Feed</span></a></li>
        <li class="rss"><a href="http://feeds.feedburner.com/CSS-Tricks-Forums"><span>Forums Feed</span></a></li>    
        <li class="rss"><a href="http://feeds.feedburner.com/CSS-Tricks-Screencasts"><span>Screencast Large</span></a></li>
        <li class="rss"><a href="http://feeds.feedburner.com/CSS-Tricks-Screencasts-iPhone"><span>Screencast Mobile</span></a></li>
      </ul>
      <a href="#" id="more">more options</a>
    </div>
  	
  	<div class="sidebar-box">
  		<h4>What's Awesome?</h4>
  		<ul>
  			<li><a href="/examples/AnythingSlider/">jQuery AnythingSlider</a></li>
  			<li><a href="/perfect-full-page-background-image/">Full Page Background Images</a></li>
  			<li><a href="/examples/ButtonMaker/">CSS3 Button Maker</a></li>
  			<li><a href="/the-css-box-model/">The CSS Box Model</a></li>
  			<li><a href="/examples/Circulate/">jQuery Circulate Plugin</a></li>
  			<li><a href="/examples/ThePrintliminator/">The Printliminator</a></li>
  			<li><a href="/examples/HSLaExplorer/">HSLa Explorer</a></li>
  		</ul>
  	</div>
  		
  	<div class="sidebar-box">
  	   <div id="bsap_1241308" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>
    </div>
  	
  	<div class="sidebar-box level-based-learning">
  		<h4>Level-Based Learning</h4>
  		<ul>
  			<li><a href="/category/beginner/">Beginner Foundations</a></li>
  			<li><a href="/category/intermediate/">Intermediate Ideas</a></li>
  			<li><a href="/category/advanced/">Advanced Concepts</a></li>
  		</ul>
  	</div>
  	
  	<div class="sidebar-box">
  	<h4>Services I Like</h4>
    	<ul class="shoutouts group">
    		<li>
    		    <a href="http://typekit.com/"><strong>Fonts</strong>
    		    <em>by</em>
    				Typekit</a>
    		</li>
    		<li>
    				<a href="http://www.mediatemple.net/#a_aid=4e25c84480ed2"><strong>Hosting</strong>
    				<em>by</em>
    				Media Temple</a>
    		</li>
    		<li> 
    				<a href="http://www.netdna.com/"><strong>CDN</strong>
    				<em>by</em>
    				NetDNA</a>
    		</li>
    		<li> 
    				<a href="http://aremysitesup.com/aff/aKkdTG"><strong>Monitoring</strong>
    				<em>by</em>
    				Are My Sites Up?</a>
    		</li>
    	</ul>
  	
  	</div>
  	
  	<div class="sidebar-box">
  		<h4>Poll</h4>
  		  			<div id="polls-36" class="wp-polls">
	<form id="polls_form_36" class="wp-polls-form" action="/star-ratings/" method="post">
		<p style="display: none;"><input type="hidden" name="poll_id" value="36" /></p>
		<h5>What is your preferred CSS preprocessor syntax?</h5>

<div id="polls-36-ans" class="wp-polls-ans">

<ul class="wp-polls-ul group">
		<li><input type="radio" id="poll-answer-210" name="poll_36" value="210" /> <label for="poll-answer-210">SASS (.sass)</label></li>
		<li><input type="radio" id="poll-answer-211" name="poll_36" value="211" /> <label for="poll-answer-211">SASS (.scss)</label></li>
		<li><input type="radio" id="poll-answer-212" name="poll_36" value="212" /> <label for="poll-answer-212">LESS</label></li>
		<li><input type="radio" id="poll-answer-213" name="poll_36" value="213" /> <label for="poll-answer-213">Stylus</label></li>
		<li><input type="radio" id="poll-answer-214" name="poll_36" value="214" /> <label for="poll-answer-214">Other</label></li>
		<li><input type="radio" id="poll-answer-215" name="poll_36" value="215" /> <label for="poll-answer-215">I've never tried any of them</label></li>
		<li><input type="radio" id="poll-answer-216" name="poll_36" value="216" /> <label for="poll-answer-216">I don't have a preference</label></li>
		<li><input type="radio" id="poll-answer-217" name="poll_36" value="217" /> <label for="poll-answer-217">I don't like any of them</label></li>
		</ul>

<p class="voting-buttons">

<input type="button" name="vote" value="   Vote   " class="button" onclick="poll_vote(36);" onkeypress="poll_result(36);" /> <a href="#ViewPollResults" class="button" onclick="poll_result(36); return false;" onkeypress="poll_result(36); return false;" title="View Results Of This Poll">View Results</a>

</p>

</div>
	</form>
</div>
<div id="polls-36-loading" class="wp-polls-loading"><img src="http://cdn.css-tricks.com/wp-content/plugins/wp-polls/images/loading.gif" width="16" height="16" alt="Loading ..." title="Loading ..." class="wp-polls-image" />&nbsp;Loading ...</div>
  		  	</div>

    <div class="sidebar-box group bottom-sidebar-ad">
      <div id="bsap_1273462" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>
    </div>
  	
  </div><!--inside-->
				
</aside>
 			</div><!--inside-->
 			
			<div id="footer-boxes" class="group">
				
				<a class="footer-box" id="f-diw" href="http://digwp.com">
					<h5>DigWP</h5>
					<p>A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.</p>
				</a>
				
				<a class="footer-box" id="f-qod" href="http://quotesondesign.com">
					<h5>Quotes on Design</h5>
					<p>Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.</p>
				</a>
				
				<a class="footer-box" id="f-htmlipsum" href="http://html-ipsum.com">
					<h5>HTML-Ipsum</h5>
					<p>One-click copy to clipboard access to <em>Lorem Ipsum</em> text that comes wrapped in a variety of HTML.</p>
				</a>
				<a class="footer-box last" id="f-bookshelf" href="/bookshelf/">
					<h5>Bookshelf</h5>
					<p>Hey Chris, what books do you recommend? These, young fertile mind, these.</p>
				</a>
				
			</div><!--footer boxes -->
 			
		</section><!--main content-->	
		
		<footer class="entry-unrelated">
		
		  <span class="f1"></span>
		  <span class="f2"></span>
		  <span class="f3"></span>
		  <span class="f4"></span>
		  <span class="f5"></span>
		
		  <div class="inside">

  			<section class="group">
  			
          <div class="footer-link-group footer-link-group-1">
            <ul>
      			 <li>&copy;2007-2012 CSS-Tricks / Chris Coyier</li>
      			 <li><small>Any downloadable example or tutorial you find on this site you are free to use for whatever you want, with or without attribution. *This website may or may not contain any CSS or Tricks.</small></li>
      			 <li class="footer-contact">
      			   <a href="/contact/">
      			     Contact
      			     <img src="http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/images/meee.png" alt="" id="meee">
              </a>
            </li>
      		  </ul>
          </div>
  
           <div class="footer-link-group footer-link-group-2">
      		   <ul>
      		    <li><a href="http://www.smashingmagazine.com/network-posts/">Smashing Network</a></li>
      			  <li><a href="http://chriscoyier.net">ChrisCoyier.net</a></li>
      			  <li><a href="http://www.lynda.com/home/DisplayCourse.aspx?lpk2=67160&amp;utm_medium=affiliate&amp;utm_source=ldc_affiliate&amp;utm_content=524&amp;utm_campaign=CD2269&amp;bid=524&amp;aid=CD2269&amp;opt=">Lynda.com</a></li>
      			  <li><a href="http://wufoo.com">Wufoo</a><!--  &middot; <a href="http://surveymonkey.com">SurveyMonkey</a> --></li>
      			</ul>
    			</div>
    			
    			 <div class="footer-link-group footer-link-group-3">
            <ul>
              <li><a href="https://github.com/chriscoyier">GitHub</a></li>
              <li><a href="https://plus.google.com/101987072260327250694/posts">Google+</a></li>
              <li><a href="http://dribbble.com/chriscoyier">Dribbble</a></li>
              <li><a href="http://forrst.com/people/chriscoyier/posts">Forrst</a></li>
            </ul>
          </div>
          
           <div class="footer-link-group footer-link-group-4">
              <ul>
                <li><a href="http://twitter.com/chriscoyier">@chriscoyier</a></li>
                <li><a href="http://twitter.com/real_css_tricks">@real_CSS_Tricks</a></li>                        
                <li><a href="http://www.youtube.com/realcsstricks">YouTube</a></li>
                <li><a href="http://www.facebook.com/CSSTricks">Facebook</a></li>
              </ul>
          </div>
        
       </section><!--group-->
                  
      </div><!--inside-->
      
		</footer>	
		
	</div><!--page wrap -->
	
	<script src='http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-9/js/css-tricks.js'></script>
	
		<div style="display:none">
	<div class="grofile-hash-map-cbbbfd3bd38e9745b7b4c597e569b960">
	</div>
	<div class="grofile-hash-map-d04e261168fc4c6f3bf1cabf203efd5a">
	</div>
	<div class="grofile-hash-map-8081b26e05bb4354f7d65ffc34cbbd67">
	</div>
	<div class="grofile-hash-map-1d4925cfe7b4025037be5038af7d4292">
	</div>
	<div class="grofile-hash-map-49c8a681abab5b69f3d63f84293fa6f1">
	</div>
	<div class="grofile-hash-map-cc9464baa9fdc511b1d5cbfb33310801">
	</div>
	<div class="grofile-hash-map-fd790474b3f2ce8e55568adc201b848a">
	</div>
	<div class="grofile-hash-map-2c1988da9816d1cf672d5eff4ef5cdfc">
	</div>
	<div class="grofile-hash-map-b8a1bec697bf352ce146a9c7b127fdc2">
	</div>
	<div class="grofile-hash-map-94c7601a9b6f238265b84651afe0e44b">
	</div>
	<div class="grofile-hash-map-dece03403bea0bf0f7a40f94c2c1ab15">
	</div>
	<div class="grofile-hash-map-e783f39b925c88ccd8b008daa6b35040">
	</div>
	<div class="grofile-hash-map-5cce99e9bf6154703d8ecdf474a750bd">
	</div>
	<div class="grofile-hash-map-da555249fb5c016dde1ea8843bde1486">
	</div>
	<div class="grofile-hash-map-9481d4984e85f636fd5911554c4ef885">
	</div>
	<div class="grofile-hash-map-9ebd51ee1a6bcc7d6a6151bd36b421fb">
	</div>
	<div class="grofile-hash-map-282fc778071b045294d806b18e216fa1">
	</div>
	<div class="grofile-hash-map-42ae77a00c615269062038db20301ce2">
	</div>
	<div class="grofile-hash-map-ecdaa0f8474b0f2e67419823e8327cda">
	</div>
	<div class="grofile-hash-map-4a9c3510f83b7935891c9022e6303246">
	</div>
	<div class="grofile-hash-map-061dbecb6643f2f75580d4ea57853674">
	</div>
	<div class="grofile-hash-map-1867e6abcd1e03d252c3cb609230b709">
	</div>
	<div class="grofile-hash-map-c34a1644cd28f2e410a04e5ca675ece9">
	</div>
	<div class="grofile-hash-map-09b1092d43417274ceda7181ded61243">
	</div>
	<div class="grofile-hash-map-d38c9047821cfa8dc9eb0e8447c3fe82">
	</div>
	<div class="grofile-hash-map-9b74c26c462552765854fea39cb3b0e7">
	</div>
	<div class="grofile-hash-map-b8af96da36dafc3b605b902a509d35f7">
	</div>
	<div class="grofile-hash-map-69f419c8bee0eb62f0c004fdcfc2c9df">
	</div>
	<div class="grofile-hash-map-108cb7cda85d28241bb9c6ad23916ba5">
	</div>
	<div class="grofile-hash-map-ce1c0bc4e985abe0fa75b1a0670e4981">
	</div>
	<div class="grofile-hash-map-d984a9ce6c0235a32005d3a6ecb6ef41">
	</div>
	<div class="grofile-hash-map-3edea3f4b7d82287a7a4f3ec1f6bbb3b">
	</div>
	<div class="grofile-hash-map-810a1d838d30af71c5137cb4eae3b97b">
	</div>
	<div class="grofile-hash-map-c8f40f94048bfd5866f2e1e74f233bd9">
	</div>
	<div class="grofile-hash-map-fd310dc48f0f8592e2ab26bb4b35ba6f">
	</div>
	<div class="grofile-hash-map-300a5afe08c9376f7620c1a6b048a7a9">
	</div>
	<div class="grofile-hash-map-ddb861368f2e63998508d788ec320ae5">
	</div>
	<div class="grofile-hash-map-daefaf52021e8adac04d635558363aaa">
	</div>
	<div class="grofile-hash-map-75b1b72743bb6f0e9585ca6032d631aa">
	</div>
	</div>
<script type='text/javascript'>
/* <![CDATA[ */
var pollsL10n = {"ajax_url":"http:\/\/css-tricks.com\/wp-content\/plugins\/wp-polls\/wp-polls.php","text_wait":"Your last request is still being processed. Please wait a while ...","text_valid":"Please choose a valid poll answer.","text_multiple":"Maximum number of choices allowed: ","show_loading":"1","show_fading":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://cdn.css-tricks.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.50'></script>

	<script src="http://stats.wordpress.com/e-201221.js" type="text/javascript"></script>
	<script type="text/javascript">
	st_go({v:'ext',j:'1:1.2.2',blog:'31482551',post:'16188'});
	var load_cmc = function(){linktracker_init(31482551,16188,2);};
	if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
	else load_cmc();
	</script>
	<script>
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-68528-29']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
		})();
	</script>
	
</body>

</html>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced
Database Caching 1/65 queries in 0.085 seconds using apc
Object Caching 2160/2378 objects using apc
Content Delivery Network via cdn.css-tricks.com

Served from: css-tricks.com @ 2012-05-22 23:47:28 -->